<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>假果酱后台</title>
    <link href="/tencent/css/bootstrap.min.css" rel="stylesheet">
    <link href="/tencent/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="/tencent/css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/tencent/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/tencent/css/animate.css" rel="stylesheet">
    <link href="/tencent/css/style.css" rel="stylesheet">

</head>

<body>
<input hidden id="limit" value="8"/>
<input hidden id="skip" value="0"/>
<input hidden id="slimit" value="4"/>
<input hidden id="sskip" value="0"/>
<input hidden id="totalSize" value=""/>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="/tencent/img/logo1.png" width="48px" height="48px"/>
                             </span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">欢迎大佬</strong>
                             </span> <span class="text-muted text-xs block">常用操作 <b class="caret"></b></span> </span> </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="/tencent/fireIndex/index">返回首页</a></li>
                                <li><a href="/tencent/fireIndex/lookAllUser">查看所有用户信息</a></li>
                                <li><a href="">你看不见我</a></li>
                                <li class="divider"></li>
                                <li><a href="/tencent/fireIndex/login">Logout</a></li>
                            </ul>
                        </div>
                        <div class="logo-element">
                            IN+
                        </div>
                    </li>
                    <li class="active">
                        <a href="/tencent/fireIndex/index"><i class="fa fa-database"></i> <span class="nav-label">功能模块</span> <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li class="active" ><a href="/tencent/fireIndex/index"><i class="fa fa-th-large"></i>主页</a></li>
                            <li><a href="/tencent/fireIndex/basic_gallery"><i class="fa fa-picture-o"></i>画廊</a></li>
                            <li><a href="/tencent/fireIndex/lookAllUser"><i class="fa fa-star"></i>用户信息</a></li>
                            <li><a href="/tencent/fireIndex/pin_board"><i class="fa fa-edit"></i>公告</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="search_results.html">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">欢迎进入假果酱后台</span>
                </li>



                <li>
                    <a href="/tencent/fireIndex/login">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>

        </nav>
        </div>
                <div class="row  border-bottom white-bg dashboard-header">

                    <div class="col-sm-3">
                        <h2>欢迎进入后台--喵</h2>
                        <small>在这里看到用户识别类型的排行</small>
                        <ul class="list-group clear-list m-t" id="rankingNumber">

                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <!--<div class="flot-chart dashboard-chart">-->
                            <!--<div class="flot-chart-content" id="lineChart"></div>-->
                        <!--</div>-->
                        <div>
                            <canvas id="lineChart" height="100"></canvas>
                        </div>
                        <div class="row text-left">
                            <div class="col-xs-4">
                                <div class=" m-l-md">
                                <span class="h4 font-bold m-t block" id="allNumber"></span>
                                <small class="text-muted m-b block">用户总使用次数</small>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <span class="h4 font-bold m-t block" id="rightNumber"></span>
                                <small class="text-muted m-b block">调用成功次数</small>
                            </div>
                            <div class="col-xs-4">
                                <span class="h4 font-bold m-t block" id="errorNumber"></span>
                                <small class="text-muted m-b block">调用失败次数</small>
                            </div>

                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="statistic-box">
                        <h4>
                            后台软硬件环境
                        </h4>
                        <p>
                          <small> 服务器搭建阿里云云服务器(低配)</small>
                        </p>
                            <div class="m-t">
                                框架架构:<br>SpringBoot+mysql+mongoDB+SpringData+Mybatis+EChart
                                <br><br>
                                域名: http://nannima.top
                                <br><br>
                                带宽：1M(请对我温柔点)
                                <br><br>
                                AI技术提供处理商: 腾讯(ai.qq.com)
                            </div>

                        </div>
                    </div>

            </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content">
                        <div class="row">
                        <div class="col-lg-4">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>更多信息（以下都不参与记录，用于测试和展示而已）</h5>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content no-padding">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="http://nannima.top:8080/test" target="_Blank">@网页版本AI识别</a></p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i>    web端</small>
                                        </li>
                                        <li class="list-group-item">
                                            <p><a class="text-info"><img src="/tencent/img/wxWeb.jpg"></a><br>用手机微信扫一扫可访问</p>

                                            <small class="block text-muted"><i class="fa fa-clock-o"></i>  微信web端</small>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                            <div class="col-lg-4">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>用户最新识别记录(点击图片可查看详情信息)</h5>
                                        <div class="ibox-tools">
                                            <span class="label label-warning-light">默认展示最新8条</span>
                                        </div>
                                    </div>
                                    <div class="ibox-content">

                                        <div>
                                            <div class="feed-activity-list" id="newUserData">
                                            </div>
                                            <button class="btn btn-primary btn-block m-t" onclick="reloadFirstRecordLimit()"><i class="fa fa-arrow-down"></i> 点击加载更多</button>

                                        </div>

                                    </div>
                                </div>

                            </div>
                        <div class="col-lg-4">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>意见建议</h5>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content ibox-heading">
                                    <h3>祝您有美好的一天</h3>
                                    <small><i class="fa fa-map-marker"></i>这里是用户给您留下的意见建议来看一下吧</small>
                                </div>
                                <div class="ibox-content inspinia-timeline" id="suggestPage">



                                </div>
                                <div id="suggestbutton">
                                <button class="btn btn-primary btn-block m-t" onclick="reloadSuggest()"><i class="fa fa-arrow-down"></i> 点击加载更多</button>
                                </div>
                            </div>
                        </div>

                        </div>
                </div>
                <div class="footer">
                    <div class="pull-right">
                        Copyright @假果酱
                    </div>
                    <div>
                        © 2018 - no money pay for aliyun
                    </div>
                </div>
            </div>
        </div>

        </div>


    </div>

    <!-- Mainly scripts -->
    <script src="/tencent/js/jquery-2.1.1.js"></script>
    <script src="/tencent/js/bootstrap.min.js"></script>
    <script src="/tencent/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="/tencent/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Flot -->
    <script src="/tencent/js/plugins/flot/jquery.flot.js"></script>
    <script src="/tencent/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/tencent/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="/tencent/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/tencent/js/plugins/flot/jquery.flot.pie.js"></script>

    <!-- Peity -->
    <script src="/tencent/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/tencent/js/demo/peity-demo.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="/tencent/js/inspinia.js"></script>
    <script src="/tencent/js/plugins/pace/pace.min.js"></script>

    <!-- jQuery UI -->
    <script src="/tencent/js/plugins/jquery-ui/jquery-ui.min.js"></script>

    <!-- GITTER -->
    <script src="/tencent/js/plugins/gritter/jquery.gritter.min.js"></script>

    <!-- Sparkline -->
    <script src="/tencent/js/plugins/sparkline/jquery.sparkline.min.js"></script>

    <!-- Sparkline demo data  -->
    <script src="/tencent/js/demo/sparkline-demo.js"></script>

    <!-- ChartJS-->
    <script src="/tencent/js/plugins/chartJs/Chart.min.js"></script>

    <!-- Toastr -->
    <script src="/tencent/js/plugins/toastr/toastr.min.js"></script>


    <script>
        $(document).ready(function() {
            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 4000
                };
                toastr.success('您可以在这里找到您需要看到任何信息，所有的信息都由用户上传，该后台只用于查看不可进行其他操作，也不负任何责任', '您好呀,欢迎来到后台首页');

            }, 3000);
        });
    </script>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        识别结果信息(json格式)
                    </h4>
                </div>
                <div class="modal-body" id="resultJson">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
<script>
    function getDateDiff(dateTimeStamp){
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime();
        var diffValue = now - dateTimeStamp;
        if(diffValue < 0){return;}
        var monthC =diffValue/month;
        var weekC =diffValue/(7*day);
        var dayC =diffValue/day;
        var hourC =diffValue/hour;
        var minC =diffValue/minute;
        if(monthC>=1){
            result="" + parseInt(monthC) + "月前";
        }
        else if(weekC>=1){
            result="" + parseInt(weekC) + "周前";
        }
        else if(dayC>=1){
            result=""+ parseInt(dayC) +"天前";
        }
        else if(hourC>=1){
            result=""+ parseInt(hourC) +"小时前";
        }
        else if(minC>=1){
            result=""+ parseInt(minC) +"分钟前";
        }else
            result="刚刚";
        return result;
    }
    function formatJson(msg) {
        var rep = "~";
        var jsonStr = JSON.stringify(msg, null, rep)
        var str = "";
        for (var i = 0; i < jsonStr.length; i++) {
            var text2 = jsonStr.charAt(i)
            if (i > 1) {
                var text = jsonStr.charAt(i - 1)
                if (rep != text && rep == text2) {
                    str += "<br/>"
                }
            }
            str += text2;
        }
        jsonStr = "";
        for (var i = 0; i < str.length; i++) {
            var text = str.charAt(i);
            if (rep == text)
                jsonStr += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            else {
                jsonStr += text;
            }
            if (i == str.length - 2)
                jsonStr += "<br/>"
        }
        return jsonStr;
    }
    function formatDate(now) {
        var year = now.getFullYear(),
            month = now.getMonth() + 1,
            date = now.getDate(),
            hour = now.getHours(),
            minute = now.getMinutes(),
            second = now.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }
    function findById(id) {
        $.post("/tencent/fire/findById",{id:id},function (data) {
              if(data.code==0){
                  var list = data.data.list;
                  document.getElementById("resultJson").innerHTML=formatJson(list[0]);
                  $('#myModal').modal({
                      keyboard: true
                  });
              }
        });
    }
    function findByPicture(id) {
        document.getElementById("resultJson").innerHTML= '<img alt="image" src="'+id+'" width="300px" >';
                $('#myModal').modal({
                    keyboard: true
                });
    }
    $.post("/tencent/fire/getTypeRanking",{},function (data) {
           if(data.code==0){
                var allcontent = "";
                var list = data.data;
                for(var i = 0;i<6;i++){
                var content ='<li class="list-group-item fist-item">'+
                    '                                <span class="pull-right">'+
                    +list[i].number+'次'+
                    '                                </span>'+
                    '                                <span class="label label-primary">'+(i-0+1)+'</span> '+list[i].typeName+
                    '                            </li>';
                allcontent = allcontent + content;
                }
               document.getElementById("rankingNumber").innerHTML=allcontent;
               var labelsArray=new Array();
               var dataArray=new Array();
               for(var i = 0;i<list.length;i++){
                   labelsArray[i] = list[i].typeName;
                   dataArray[i] = list[i].number;
               }
               var lineData = {
                   labels: labelsArray,
                   datasets: [
                       {
                           label: "Example dataset",
                           fillColor: "rgba(26,179,148,0.5)",
                           strokeColor: "rgba(26,179,148,0.7)",
                           pointColor: "rgba(26,179,148,1)",
                           pointStrokeColor: "#fff",
                           pointHighlightFill: "#fff",
                           pointHighlightStroke: "rgba(26,179,148,1)",
                           data: dataArray
                       }
                   ]
               };

               var lineOptions = {
                   scaleShowGridLines: true,
                   scaleGridLineColor: "rgba(0,0,0,.05)",
                   scaleGridLineWidth: 1,
                   bezierCurve: true,
                   bezierCurveTension: 0.4,
                   pointDot: true,
                   pointDotRadius: 4,
                   pointDotStrokeWidth: 1,
                   pointHitDetectionRadius: 20,
                   datasetStroke: true,
                   datasetStrokeWidth: 2,
                   datasetFill: true,
                   responsive: true,
               };
               var ctx = document.getElementById("lineChart").getContext("2d");
               var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
           }
    });
    $.post("/tencent/fire/getPN",{},function (data) {
            if(data.code==0){
                document.getElementById("allNumber").innerHTML=data.data.allNumber+"次";
                document.getElementById("errorNumber").innerHTML=data.data.error+"次";
                document.getElementById("rightNumber").innerHTML=data.data.right+"次";
            }
    });
    function reloadFirstRecordLimit() {
        var limit =   document.getElementById("limit").value;
        var skip =   document.getElementById("skip").value;
        $.post("/tencent/fire/getFirstRecordLimit",{limit:limit,skip:skip},function (data) {
            if(data.code==0){
                var list = data.data.list;
                var allcontent = "";
                for(var i = 0;i<list.length;i++){
                    var content = "";
                    var result = "";
                    if(list[i].result.ret==0){
                        result ="识别成功";
                    }else{
                        result ="识别失败";
                    }
                    if(list[i].ImgUrl!=null){
                        content = '     <div class="feed-element">'+
                            '     <a onclick="findByPicture(\''+list[i].ImgUrl+'\')" class="pull-left">'+
                            '           <img alt="image" class="img-circle" src="'+list[i].ImgUrl+'" >'+
                            '        </a>'+
                            '         <div class="media-body" onclick="findById(\''+list[i]._id+'\')">'+
                            '         <small class="pull-right">'+list[i].type+'</small>'+
                            '         <strong>'+result+'</strong><br>'+
                            '       <small class="text-muted">'+formatDate(new Date(list[i].createTime))+'</small>'+
                            '      </div>'+
                            '   </div>';
                    }else{  //无图片
                        content = '     <div class="feed-element">'+
                            '     <a  class="pull-left">'+
                            '           <img alt="image" class="img-circle" src="/tencent/img/logo1.png" >'+
                            '        </a>'+
                            '         <div class="media-body" onclick="findById(\''+list[i]._id+'\')">'+
                            '         <small class="pull-right">'+list[i].type+'</small>'+
                            '         <strong>'+result+'</strong><br>'+
                            '       <small class="text-muted">'+formatDate(new Date(list[i].createTime))+'</small>'+
                            '      </div>'+
                            '   </div>';
                    }
                    allcontent = allcontent+content;
                }
               var before =  document.getElementById("newUserData").innerHTML;
                document.getElementById("newUserData").innerHTML = before+allcontent;
               document.getElementById("skip").value = (skip-0)+(limit-0);
            }
        });
    }
    reloadFirstRecordLimit();
    function reloadSuggest() {
        var limit =   document.getElementById("slimit").value;
        var skip =   document.getElementById("sskip").value;
        var endLimit = (limit-0)+(skip-0);
        $.post("/tencent/fire/getSuggest",{limit:endLimit,skip:skip},function (data) {
            if(data.code==0){
                var list = data.data;
                var allcontent = "";
                if(data.data.length==0){
                    document.getElementById("suggestbutton").innerHTML='   <button class="btn btn-primary btn-block m-t" ><i class="fa fa-arrow-down"></i> 已无更多意见建议</button>';
                }
                for(var i = 0;i<list.length;i++){
                    var content = '<div class="timeline-item">'+
                        '                                    <div class="row">'+
                        '                                        <div class="col-xs-3 date">'+
                        '                                            <i class="fa fa-comments"></i>'+
                        formatDate(new Date(list[i].create_time))+
                        '                                            <br/>'+
                        '                                            <small class="text-navy">'+getDateDiff(list[i].create_time)+'</small>'+
                        '                                        </div>'+
                        '                                        <div class="col-xs-7 content">'+
                        '                                            <p class="m-b-xs"><strong>'+list[i].nick_name+'</strong></p>'+
                        '                                            <p>'+
                        list[i].suggest+
                        '                                            </p>'+
                        '                                        </div>'+
                        '                                    </div>'+
                        '                                </div>';
                    allcontent = allcontent+content;
                }
                var before = document.getElementById("suggestPage").innerHTML;
                document.getElementById("suggestPage").innerHTML= before+allcontent;
                document.getElementById("sskip").value = (limit-0)+(skip-0);
            }
        });

    }
    reloadSuggest();
    

</script>
</html>
